<script setup lang="ts">

import { defineEmits, ref } from 'vue'
import { IOptionItem } from "xcore/cmpnt"
import _ from 'lodash'

interface Emits {
    (e: 'change', value: any): void
}

const emit = defineEmits<Emits>()

const selected = ref<string>('')


const onclick = (xvalue: string) => {
    selected.value = xvalue
    emit('change', xvalue)
}



</script>

<template>
    <div class="te-color-select d-inline-block">
        <el-select v-model="$attrs['modelValue']" @change="onclick" v-bind="$attrs" :style="$attrs['style']"
            :class="$attrs['class']">
            <el-option v-for="item in ($attrs['options'] as IOptionItem[])" :key="item.value" :label="item.label"
                :value="item.value">
                <div class="d-flex align-items-center justify-content-between">
                    <el-tag :color="item.value" class="me-2 float-start" size="small" />
                    <span class="float-end" v-if="item.label">{{ item.label }}</span>
                </div>
            </el-option>
            <template #label>
                <el-tag :color="$attrs['modelValue']" />
            </template>
        </el-select>
    </div>
</template>

<style scoped>
.te-color-select {
    overflow: hidden;
     min-width: 120px;
}

.el-tag {
    border: none;
    aspect-ratio: 1;
}
</style>